<template>
  <div class="commentItem">
    <div class="wrap">
      <div class="pic">
        <img :src="comment.user.avatarUrl" />
      </div>
      <div class="right">
        <div class="top">
          <div class="info">
            <div class="name">{{ comment.user.nickname }}</div>
            <div class="date">{{ comment.time | formatTime }}</div>
          </div>
          <div class="like">
            <div :class="['likeWrap', { active: isLike }]" @click="clickLike">
              <span>{{
                $options.filters.formatNum(
                  isLike ? comment.likedCount + 1 : comment.likedCount
                )
              }}</span>
              <i>
                <svg viewBox="0 0 28 28">
                  <path
                    d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"
                  ></path>
                </svg>
              </i>
            </div>
          </div>
        </div>
        <div class="content">
          <span class="beReplied" v-if="comment.beReplied.length">
            回复<span class="name"
              >@{{ comment.beReplied[0].user.nickname }}</span
            >：
          </span>
          <span class="text">
            {{ comment.content }}
          </span>
        </div>
        <div class="repContent" v-if="comment.beReplied.length">
          <span class="name">@{{ comment.beReplied[0].user.nickname }}</span
          >：{{ comment.beReplied[0].content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLike: false,
    };
  },
  props: {
    comment: Object,
  },
  filters: {
    formatTime(val) {
      return new Date(val).toLocaleDateString();
    },
    formatNum(val) {
      return val > 100000000
        ? (val / 100000000).toFixed(0) + "亿"
        : val > 10000
        ? (val / 10000).toFixed(1).replace(/\.0$/, "") + "万"
        : val;
    },
  },
  methods: {
    clickLike() {
      this.isLike = !this.isLike;
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  .wrap {
    padding-top: 10px;
    display: flex;
    .pic {
      margin: 0 10px;
      width: 33px;
      height: 33px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .right {
      padding-right: 10px;
      padding-bottom: 11px;
      flex: 1;
      width: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .top {
        display: flex;
        .info {
          flex: 1;
          width: 0;
          .name {
            line-height: 20px;
            font-size: 14px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .date {
            line-height: 17px;
            font-size: 9px;
            color: #999;
          }
        }
        .like {
          width: 65px;
          height: 22px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .likeWrap {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            span {
              line-height: 22px;
              font-size: 13px;
              margin-right: 5px;
              color: #999;
            }
            i {
              width: 14px;
              height: 22px;
              padding-top: 2px;
              svg {
                path {
                  fill: #999;
                }
              }
            }
            &.active {
              span {
                color: #5dcaa8;
              }
              i {
                svg {
                  path {
                    fill: #5dcaa8;
                  }
                }
              }
            }
          }
        }
      }
      .content {
        font-size: 15px;
        margin-top: 5px;
        line-height: 22px;
        word-break: break-all;
        .beReplied {
          .name {
            color: #507daf;
          }
        }
      }
      .repContent {
        margin: 5px 0;
        padding: 10px;
        color: #888;
        font-size: 14px;
        line-height: 21px;
        background: #f5f5f5;
        border-radius: 5px;
      }
    }
  }
}
</style>